<template>
    <div class="container app-container">
        <div class="title" style="margin:20px 0 20px 0;height:20px;line-height:20px;border-left:1px solid #CCC;text-indent:15px;">${title}</div>
        <div class="form">
            <el-descriptions :column="1" title="| 基础信息" :label-style="{'width':'120px'}" :style="{'margin-top':'20px'}">
                <!-- 遍历字段 -->
                <#list columns as col>
                    <#if (col.type == "image")>
                        <el-descriptions-item label="${col.description}">
                            <el-image :src="form.${col.name}" fit="contain" class="thumbnail"></el-image>
                        </el-descriptions-item>
                    <#else>
                        <el-descriptions-item label="${col.description}">{{ form.${col.name} }}</el-descriptions-item>
                    </#if>
                </#list>
                <!-- 遍历字段 -->
            </el-descriptions>
        </div>
    </div>
</template>

<script>
    // 导入接口方法
    import { ${fetchApiMethod} } from '${apiPath}';

    export default {
        name: '${name}',
        dicts: [],
        components: {},
        data() {
            return {
                // 标题
                title: '${title}',
                // 初始化 id 为 null
                id: null,
                // 表单参数
                form: {
                    <#list columns as col>
                        <#if (col.type == "select" && col.multiple??)>
                            ${col.name}: [],
                        <#elseif (col.type == "string")>
                            ${col.name}: '',
                        <#elseif (col.type == "number")>
                            ${col.name}: 0,
                        <#else>
                            ${col.name}: null,
                        </#if>
                    </#list>
                },
            };
        },
        created() {
            // 通过 $route.params 获取路由参数
            this.id = this.$route.query.id ? this.$route.query.id : null;
            console.log(this.id);
            // 判断是否存在 id 参数
            this.isEdit = !!this.id;
            if (this.isEdit) {
                // 如果存在 id 参数，则说明当前页面是修改状态
                // 可以根据 id 参数获取需要修改的数据
                this.getDetail(this.id);
            } else {
                // 如果不存在 id 参数，则说明当前页面是新增状态
            }
        },
        mounted() {},
        methods: {
            // 表单重置
            reset() {
                this.form = {
                    <#list columns as col>
                        <#if (col.type == "select" && col.multiple??)>
                            ${col.name}: [],
                        <#elseif (col.type == "string")>
                            ${col.name}: '',
                        <#elseif (col.type == "number")>
                            ${col.name}: 0,
                        <#else>
                            ${col.name}: null,
                        </#if>
                    </#list>
                };
                this.resetForm('form');
            },

            /** 获取form表单数据 */
            async getDetail(id) {
                try {
                    const res = await ${fetchApiMethod}(id);
                    if (res.code == 200) {
                        const {
                            <#list columns as col>${col.name},</#list>
                        } = res.data;

                        this.form = {
                            <#list columns as col>
                                ${col.name}<#if (col.multiple??)>${":" + col.name + ".split(',')"}</#if>,
                            </#list>
                        };
                    }
                } catch (err) {
                    console.error(err);
                }
            },

            /** 关闭按钮 */
            close() {
                // 跳转地址 和 携带参数
                const obj = {
                    path: <#if (backUrl??)>'${backUrl}'<#else>''</#if>,
                    query: {
                        t: Date.now(),
                        pageNum: this.$route.query.pageNum
                    },
                };
                this.$tab.closeOpenPage(obj).then(() => {
                    this.$tab.refreshPage(obj);
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .container { position: relative; }
    .submit-btn { position: fixed; bottom: 10px; left: 50%;}
    .thumbnail { height:150px; margin-right:10px; }
</style>
